<template>
  <div class="weather" v-for="item in weatherInfo">
    <table>
      <tr>
        <td>城市</td>
        <td>{{ item.city }}</td>
      </tr>
      <tr>
        <td>天气</td>
        <td>{{ item.weather }}</td>
      </tr>
      <tr>
        <td>温度</td>
        <td>{{ item.temperature }}</td>
      </tr>
      <tr>
        <td>风向</td>
        <td>{{ item.winddirection }}</td>
      </tr>
      <tr>
        <td>风力</td>
        <td>{{ item.windpower }}</td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { useMapCity } from '@/stores/mapCity'
import { getWeatherByCityNameHttp } from '@/request/homeHttp'
import { ref, onMounted, watch, toRefs } from 'vue'
const $mapCity = useMapCity()
const weatherInfo = ref([])
let currentCity = toRefs($mapCity).currentCity

onMounted(async () => {
  const result = localStorage.getItem('currentCity') || ''
  $mapCity.setCurrentCity(result)
  let { lives } = await getWeatherByCityNameHttp($mapCity.currentCity)
  weatherInfo.value = lives
})
watch(
  currentCity,
  async () => {
    let { lives } = await getWeatherByCityNameHttp($mapCity.currentCity)
    weatherInfo.value = lives
  },
  { immediate: true }
)
</script>
<style scoped>
.weather {
  position: fixed;
  right: 20px;
  top: 70px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 3px 2px #333;
  background: #2193b0a1;
  background: -webkit-linear-gradient(to top, #6dd5ed, #2193b0);
  background: linear-gradient(to top, #6dd5edb0, #2193b0);
  z-index: 100;
}
.weather table {
  color: #fff;
  text-align: center;
  width: 200px;
  line-height: 30px;
  border-radius: 15px;
  font-size: 15px;
  border-collapse: collapse;
}
.weather table td {
  border: 1px solid #eeeeee79;
}
</style>
